<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
   <![endif]-->
    <!-- 引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="./bootsrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row>div{
            height: 200px;
            background-color: aqua;
        }      
    </style>
</head>

<body>
    <!-- 类前缀 -->
    <!-- .col-lg-份数     -------------宽屏设备 -->
    <!-- .col-md-份数     -------------中等屏幕 -->
    <!-- .col-sm-份数     -------------小屏设备 -->
    <!-- .col-xs-份数     -------------超小屏幕 -->
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 用列嵌套最好加一个行 row    这样可以去掉父元素的padding值 -->
                <div class="row">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>

</html>